<template>
    <uv-checkbox-group v-model="formValue" @change="onChange">
        <uv-checkbox class="m-2" v-for="item in options" :key="item.value" :label="item.label"
            :name="item.value"></uv-checkbox>
    </uv-checkbox-group>
</template>
<script setup lang="ts">
import { ref, defineEmits, defineProps, watch } from 'vue'

const emit = defineEmits(['update:modelValue'])
const props = defineProps({
    modelValue: {
        type: String
    },
    options: {
        type: Array
    }
})


const formValue = ref([])

const initForm = () => {
    if (props.modelValue && props.modelValue.length) {
        formValue.value = props.modelValue.split(',')
        
    } else {
        formValue.value = []
    }
}

watch(() => props.modelValue, () => {
    initForm()
}, {
    immediate: true
})

const onChange = () => {
    emit('update:modelValue', formValue.value.join(','))
}


</script>